<link rel="stylesheet" href="basics.css">
<style>
.item.one {
  background: #f25d0d;
  top: 10px;
  left: 10px;
}

.item.two {
  background: #0df20d;
  top: 50px;
  left: 50px;
}

.item.three {
  background: #f20d11;
  top: 100px;
  left: 100px;
}

.item.four {
  background: #f2700d;
  top: 150px;
  left: 150px;
}

.item.five {
  background: #f20dbd;
  top: 200px;
  left: 200px;
}

.item.six {
  background: #e30df2;
  top: 250px;
  left: 250px;
}
</style>

<button type="button" class="item one">1</button>
<button type="button" class="item two">2</button>
<button type="button" class="item three">3</button>
<button type="button" class="item four">4</button>
<button type="button" class="item five">5</button>
<button type="button" class="item six">6</button>

<script src="../../dist/DragSelect.js"></script>
<script>
    const ds = new DragSelect({ selectables: document.querySelectorAll('.item') });

    window.pubsub = {}
    window.pubsub.onDragStartCalls = [];
    window.pubsub.onPreDragStartCalls = [];
    window.pubsub.onDragMoveCalls = [];
    window.pubsub.onElementSelectCalls = [];
    window.pubsub.onElementUnselectCalls = [];
    window.pubsub.callbackCalls = [];
    window.pubsub.autoScrollCalls = [];

    ds.subscribe('DS:start:pre', (e) => window.pubsub.onPreDragStartCalls.push(e))
    ds.subscribe('DS:start', (e) => window.pubsub.onDragStartCalls.push(e))
    ds.subscribe('DS:update', (e) => window.pubsub.onDragMoveCalls.push(e))
    ds.subscribe('DS:select', (e) => window.pubsub.onElementSelectCalls.push(e))
    ds.subscribe('DS:unselect', (e) => window.pubsub.onElementUnselectCalls.push(e))
    ds.subscribe('DS:end', (e) => window.pubsub.callbackCalls.push(e))
    ds.subscribe('DS:scroll', (e) => window.pubsub.autoScrollCalls.push(e))
</script>
